<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑专辑</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
</head>
<body>
<div style="padding: 20px">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>编辑专辑</legend>
        <div class="layui-field-box">
            <div style="width: 500px;margin: 0 auto">
                <form class="layui-form" action="">
                    <!-- 隐藏字段用于存储专辑ID -->
                    <input type="hidden" name="id" id="albumId">
                    <div class="layui-form-item">
                        <label class="layui-form-label">专辑名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入专辑名称"
                                   autocomplete="off" class="layui-input" id="albumName">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">歌手</label>
                        <div class="layui-input-block">
                            <input type="text" name="singer" required lay-verify="required" placeholder="请输入歌手"
                                   autocomplete="off" class="layui-input" id="singer">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">唱片公司</label>
                        <div class="layui-input-block">
                            <input type="text" name="company" placeholder="请输入唱片公司" autocomplete="off"
                                   class="layui-input" id="company">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">发行时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="publishTime" id="publishTime" placeholder="请选择发行时间"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">封面图</label>
                        <div class="layui-input-block">
                            <div class="layui-upload-drag" id="albumPic">
                                <i class="layui-icon layui-icon-upload"></i>
                                <div>点击上传封面图，或将图片拖拽到此处</div>
                            </div>
                            <input type="hidden" name="pic" id="picUrl">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-block">
                            <input type="radio" name="status" value="1" title="上架" id="statusOn">
                            <input type="radio" name="status" value="0" title="下架" id="statusOff">
                        </div>
                    </div>
                    <!-- 提交按钮 -->
                    <div class="layui-form-item" style="text-align: right">
                        <button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">
                            取消
                        </button>
                        <button type="button" class="layui-btn layui-btn-warm" lay-submit lay-filter="LAY-album-edit-submit">
                            确认修改
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </fieldset>
</div>
<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        //获取文件上传组件
        var upload = layui.upload;
        //日期组件
        var laydate = layui.laydate;

        // 渲染日期组件
        laydate.render({
            elem: '#publishTime',
            theme: '#448aff'
        });

        // 获取URL参数中的专辑ID
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURIComponent(r[2]);
            return null;
        }

        // 页面加载时获取专辑信息
        $(document).ready(function() {
            var albumId = getUrlParam('id');
            if (albumId) {
                // 获取专辑详细信息
                $.get('/album/details?id=' + albumId, function(result) {
                    if (result.code === 0) {
                        var album = result.data;
                        // 填充表单数据
                        $('#albumId').val(album.id);
                        $('#albumName').val(album.name);
                        $('#singer').val(album.singer);
                        $('#company').val(album.company);
                        
                        // 处理发行时间
                        if (album.publishTime) {
                            var date = new Date(album.publishTime);
                            var year = date.getFullYear();
                            var month = ('0' + (date.getMonth() + 1)).slice(-2);
                            var day = ('0' + date.getDate()).slice(-2);
                            $('#publishTime').val(year + '-' + month + '-' + day);
                        }
                        
                        $('#picUrl').val(album.pic);
                        
                        // 显示已有的封面图
                        if (album.pic) {
                            $('#albumPic').html('<img src="' + album.pic + '" alt="封面图" style="width: 100%; height: 100%;">');
                        }
                        
                        // 设置状态单选框
                        if (album.status === 1) {
                            $('#statusOn').prop('checked', true);
                        } else {
                            $('#statusOff').prop('checked', true);
                        }
                        
                        // 重新渲染表单
                        form.render();
                    } else {
                        layer.msg('获取专辑信息失败: ' + result.msg, {icon: 2});
                    }
                }).fail(function() {
                    layer.msg('获取专辑信息失败，请检查网络连接', {icon: 2});
                });
            }
        });

        //对文件上传组件监听
        upload.render({
            elem: '#albumPic',
            url: '/file/upload',  /*设置文件上传接口*/
            field: 'file',  /*设置文件域字段名，后端接口可以根据该字段名得到文件*/
            accept: 'file', /*设置允许上传的文件类型*/
            acceptMime: 'image/*', /*打开文件选择框时过滤所需的文件（图片）*/
            choose: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#albumPic').html('<img src="' + result + '" alt="封面图" style="width: 100%; height: 100%;">');
                });
            },
            done: function(res){
                //上传完成后，将服务器返回的URL设置到隐藏字段中
                if(res.code === 0){
                    $('#picUrl').val(res.data);
                    layer.msg('封面图上传成功', {icon: 1});
                } else {
                    layer.msg('封面图上传失败: ' + res.msg, {icon: 2});
                }
            },
            error: function(){
                layer.msg('封面图上传失败，请检查网络连接', {icon: 2});
            }
        });

        // 取消按钮事件
        $('#cancelBtn').click(function() {
            // 关闭当前窗口（如果是iframe）
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });

        //监听提交
        form.on('submit(LAY-album-edit-submit)', function (data) {
            // 发送Ajax请求到后台更新专辑
            $.ajax({
                url: '/album/update',
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify(data.field),
                success: function (result) {
                    if (result.code === 0) {
                        layer.msg('修改成功', {icon: 1});
                        // 延迟关闭窗口并刷新父页面表格
                        setTimeout(function() {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            // 刷新父页面的表格
                            parent.layui.table.reload('albumTable');
                        }, 1000);
                    } else {
                        layer.msg('修改失败: ' + result.msg, {icon: 2});
                    }
                },
                error: function (xhr, status, error) {
                    layer.msg('修改失败，请检查网络连接', {icon: 2});
                }
            });
            return false; //阻止表单跳转
        });
    });
</script>
</body>
</html>